<template>
	<scroll-view scroll-y="true" :style="{height: windowHeight + 'px'}" :scroll-into-view="sivID"
		:scroll-with-animation="true" @scroll="scrollHandler($event)">
		<!-- 顶部固定定位的盒子 -->
		<div class="topFixedBox" :class="{'kejian': scrollTop > 160}">
			<div class="links">
				<span>概览</span>
				<span @click="sivID = 'vo_box'">评论</span>
				<span>图文详情</span>
			</div>
		</div>


		<!-- 整体包围盒 -->
		<div class="wrap">
			<div class="swiper-container">
				<!-- 返回按钮 -->
				<div class="backbtn" @click="backbtnHandler()">
					
				</div>
				
				<swiper class="myswiper" indicator-dots="true" indicator-color="#d6aa0a"
					indicator-active-color="#ffff00" @change="swiperChangeHandler($event)" circular="true">
					<block v-for="(item, index) in detailObj.pics" :key="index">
						<swiper-item>
							<image :src="`http://www.zkt-it.com:5050/pic/product/${item}?format=900w_900h_1e_0l`">
							</image>
						</swiper-item>
					</block>
				</swiper>
				<div class="pager">{{swiperNowIndex + 1}} / {{detailObj.pics.length}}</div>
			</div>

			<!-- info_box信息盒子 -->
			<div class="info_box">
				<div class="pName">{{detailObj.pName}}</div>
				<div class="price">{{detailObj.price}}</div>
				<div class="shopName">{{detailObj.shopName}}</div>
			</div>

			<!-- 颜色和型号切换 -->
			<div id="vo_box" class="vo_box" v-if="detailObj.vo">
				<!-- 罗列所有颜色 -->
				<div class="">
					颜色：
				</div>
				<div class="">
					<span class="choice_span"
						:class="{choosed: nowColorId == item.characterValueId, disabled: checkDisabled(item.characterValueId, nowVersionId)}"
						v-for="item in detailObj.vo.colorList" :key="item.characterValueId"
						@click="colorChoiceSpanClickHandler(item.characterValueId)">
						{{item.characterValueName}}
					</span>
				</div>
				<!-- 罗列所有内存 -->
				<div class="">
					内存：
				</div>
				<div class="">
					<span class="choice_span"
						:class="{choosed: nowVersionId == item.characterValueId, disabled: checkDisabled(nowColorId, item.characterValueId)}"
						v-for="item in detailObj.vo.versionList" :key="item.characterValueId"
						@click="versionChoiceSpanClickHandler(item.characterValueId)">
						{{item.characterValueName}}
					</span>
				</div>
			</div>
			
			
			<div class="comment-box">
				<div>评论：</div>
				<div>
					<div class="one-comment" v-for="(item, index) in commentsArr" :key="index">
						<div class="row1">
							<div class="avatar-box">
								<image :src="`http://www.zkt-it.com:5050/pic/comment/${item.avatar}?format=150w_150h_1e_0l`" mode=""></image>
							</div>
							<div class="word-box">
								<div class="nick-box">
									{{item.nickName}}
								</div>
								<div class="star-box" :style="{'background-position': -(5-item.score)*15 + 'px 0px'}"></div>
							</div>
						</div>
						<div class="row2">
							{{item.content}}
						</div>
						<div class="row3">
							<image v-for="(item2, index2) in item.pics" :key="index2" :src="`http://www.zkt-it.com:5050/pic/comment/${item2}?format=150w_150h_1e_0l`" mode="aspectFill" @click="commentImgClickHandler(item.pics, item2)"></image>
						</div>
					</div>
				</div>
			</div>
			
			<div class="xq-box">
				<image v-for="(item, index) in xqArr" :key="index" :src="`http://www.zkt-it.com:5050/pic/product/${item}?format=950w_950h_1e_0l`" mode="widthFix"></image>
			</div>
		</div>
	</scroll-view>
</template>

<script>
	// 评论加载锁，这个锁默认是开的，一旦加载评论了，终身关闭
	let commentLock = true;
	// 详情锁
	let xqLock = true;
	
	
	export default {
		onLoad(params) {
			commentLock = true;
			// 详情锁
			xqLock = true;
			
			this.SKU = params.SKU;

			// 写死一个SKU，表示测试
			// this.SKU = '12328899793_0000000000';

			this.loadData();

			// 得到屏幕高度
			wx.getSystemInfo({
				success: data => {
					this.windowHeight = data.safeArea.height;
				}
			});
		},
		data() {
			return {
				// 产品的SKU值
				SKU: '',
				// 产品的详情对象
				detailObj: {},
				// 轮播图的当前图
				swiperNowIndex: 0,
				// 当前的颜色值，这个10005使我们现在苟且一下，先写好，一会儿写复杂逻辑判断它的默认
				nowColorId: '',
				// 当前的版本，这个10005使我们现在苟且一下，先写好，一会儿写复杂逻辑判断它的默认
				nowVersionId: '',
				// 屏幕高度
				windowHeight: 0,
				// 已经卷动的高度
				scrollTop: 0,
				// 要滚动到的盒子id
				sivID: '',
				// 三条评论
				commentsArr: [],
				// 图文详情
				xqArr: []
			}
		},
		methods: {
			// 拉取详情数据
			loadData() {
				wx.request({
					url: 'http://www.zkt-it.com:5050/product-detail/' + this.SKU,
					success: data => {
						this.detailObj = data.data;

						if (this.detailObj.vo) {
							// 设置nowColorId、nowVersionId的默认值
							let o = this.detailObj.vo.mappingList.filter(item => item[2] == this.SKU);
							// 设置
							this.nowColorId = o[0][0];
							this.nowVersionId = o[0][1];
						}
					}
				});
			},
			swiperChangeHandler(e) {
				this.swiperNowIndex = e.detail.current;
			},
			// 用户点击了某种颜色
			colorChoiceSpanClickHandler(colorid) {

				// 先判断一下能否被点击，是否有
				if (this.checkDisabled(colorid, this.nowVersionId)) {
					wx.showToast({
						icon: 'none',
						title: '没有这种配搭哦'
					})
					return; // 什么都不做
				}

				this.nowColorId = colorid;

				// 根据我们刚才做的“讲解图”（看笔记）
				// 要去mappingList中找一下SKU
				let mappingList = this.detailObj.vo.mappingList;

				// 过滤寻找
				let result = mappingList.filter(item => item[0] == colorid && item[1] == this.nowVersionId);
				if (result.length == 1) {
					// 过滤的结果是数组，所以[0]就能够得到寻找到的这一项
					// 下标为2的项，是SKU值。
					// 他是二维数组，所以有两层方括号
					let newsku = result[0][2];
					this.SKU = newsku;
					this.loadData();
				}
			},
			// 用户点击了某种型号
			versionChoiceSpanClickHandler(versionid) {

				// 先判断一下能否被点击，是否有
				if (this.checkDisabled(this.nowColorId, versionid)) {
					wx.showToast({
						icon: 'none',
						title: '没有这种配搭哦'
					})
					return; // 什么都不做
				}

				this.nowVersionId = versionid;

				// 根据我们刚才做的“讲解图”（看笔记）
				// 要去mappingList中找一下SKU
				let mappingList = this.detailObj.vo.mappingList;

				// 过滤寻找
				let result = mappingList.filter(item => item[0] == this.nowColorId && item[1] == versionid);
				if (result.length == 1) {
					// 过滤的结果是数组，所以[0]就能够得到寻找到的这一项
					// 下标为2的项，是SKU值。
					// 他是二维数组，所以有两层方括号
					let newsku = result[0][2];
					this.SKU = newsku;
					this.loadData();
				}
			},
			// 这个函数用来检查配搭是否存在
			checkDisabled(colorId, versionId) {
				// 用新学的some函数，寻找到有没有一项，下标为0的项是颜色值，下标为1的项是version值
				// 为什么要置反，因为我们是disabled值，没有要true，有要false。
				return !(this.detailObj.vo.mappingList.some(item => item[0] == colorId && item[1] == versionId));
			},
			// 当用户滚动页面(整个页面的大scroll-view)的时候触发
			scrollHandler(e) {
				// 让当前用户已经卷动的高度，设置为组件给我们的scrollTop
				this.scrollTop = e.detail.scrollTop;
				// 只要用户一滚动，那么就让这个sivId为空即可
				this.sivID = '';
				
				// 评论的懒加载，300是随便定的，差不多就行了
				if (commentLock && e.detail.scrollTop > 300) {
					this.loadComment();
					commentLock = false;
				}
				
				// 图文详情的懒加载，600
				if (xqLock && e.detail.scrollTop > 600) {
					this.loadXQ();
					xqLock = false;
				}
			},
			// 加载评论
			loadComment() {
				wx.request({
					url: 'http://www.zkt-it.com:5050/comment/' + this.detailObj.cluster + '/' + this.SKU,
					success: data => {
						// slice(0, 3)表示截取前三条
						console.log(data.data.slice(0, 3));
						this.commentsArr = data.data.slice(0, 3);
					}
				})
			},
			// 点击评论小图的事件
			commentImgClickHandler(pics, item) {
				// 映射pics数组，让pics中的每一项都有前后公式
				let urls = pics.map(item => 'http://www.zkt-it.com:5050/pic/comment/' + item + '?format=850w_850h_1e_0l');
				
				// 当前项
				let current = 'http://www.zkt-it.com:5050/pic/comment/' + item + '?format=850w_850h_1e_0l';
				
				// 点击小图看大图
				wx.previewImage({
					urls,
					current
				});
			},
			// 加载图文详情（就是加载一堆图片，不是文字，就是图片数组）
			loadXQ() {
				wx.request({
					url: 'http://www.zkt-it.com:5050/product-detail-pic-description/' + this.SKU,
					success: data => {
						console.log(data.data);
						this.xqArr = data.data;
					}
				})
			},
			backbtnHandler() {
				// 返回按钮
				wx.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.wrap {
		background-color: #ebebeb;
		height: 1600px;
	}

	.swiper-container {
		width: 750rpx;
		height: 750rpx;
		position: relative;
	}

	.myswiper {
		background-color: white;
		width: 750rpx;
		height: 750rpx;
	}

	.myswiper image {
		width: 750rpx;
		height: 750rpx;
	}

	.swiper-container .pager {
		position: absolute;
		right: 20px;
		bottom: 20px;
		background-color: rgba(255, 255, 255, .6);
		padding: 10px 5px;
	}

	.info_box {
		border-radius: 10px;
		/* 让我们的padding变为内缩的，而不是外扩的 */
		box-sizing: border-box;
		width: 710rpx;
		margin: 20px auto;
		background-color: white;
		padding: 10px;
	}

	.info_box .pName {
		font-size: 14px;
		border-bottom: 1px solid #e8e8e8;
		padding: 6px 0;
	}

	.info_box .price {
		font-size: 16px;
		color: orange;
		font-weight: bold;
		border-bottom: 1px solid #e8e8e8;
		padding: 6px 0;
	}

	.info_box .shopName {
		padding: 6px 0;
		font-size: 14px;
	}

	.vo_box {
		border-radius: 10px;
		box-sizing: border-box;
		width: 710rpx;
		margin: 20px auto;
		background-color: white;
		padding: 10px;
	}

	.vo_box .choice_span {
		display: inline-block;
		padding: 4px 10px;
		background-color: #e8e8e8;
		margin-right: 10px;
		margin-bottom: 10px;
		font-size: 12px;
		border-radius: 6px;
	}

	.vo_box .choice_span.choosed {
		background-color: orange;
	}

	.vo_box .choice_span.disabled {
		/* 删除线 */
		text-decoration: line-through;
		background-color: #808080;
		color: white;
	}

	.topFixedBox {
		/* 固定定位。脱离标准流。就是飘起来了，不占体积、能压盖别人。 */
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100px;
		background-color: #FFD700;
		box-shadow: 0px 0px 10px #000000;
		z-index: 99999;
		/* 透明度是0，完全不可见 */
		opacity: 0;
		/* 过渡。opacity表示你要过渡啥属性，1s表示时长，ease表示不匀速，匀速写linear，最后的0s表示延迟0s */
		transition: opacity 1s ease 0s;
		/* 弹性盒 */
		display: flex;
		/* 副轴沉底，主轴居中，这两个属性都是弹性盒容器的属性 */
		justify-content: center;
		align-items: flex-end;
	}

	/* 两个类名之间，这里不能有空格。因为是同一个标签。我们想表达的意思是：选择顶部盒子，且顶部盒子有kejian的类名 */
	.topFixedBox.kejian {
		opacity: 1;
	}

	.topFixedBox .links {
		display: block;
		margin-bottom: 10px;
	}

	.topFixedBox .links span {
		padding: 0 20px;
	}
	
	.comment-box {
		border-radius: 10px;
		box-sizing: border-box;
		width: 710rpx;
		margin: 20px auto;
		background-color: white;
		padding: 10px;
		
	}
	.one-comment {
		border-bottom: 1px solid #c5c5c5;
	}
	.one-comment:last-child {
		border-bottom: none;
	}
	.star-box {
		width: 80px;
		height: 14px;
		/* 背景重复：不重复 */
		background-repeat: no-repeat;
		background-image: url(../../static/star.png);
	}
	.comment-box .row1 {
		display: flex;
		padding-top: 10px;
		margin-bottom: 10px;
	}
	.comment-box .row1 .avatar-box {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10px;
	}
	.comment-box .row1 .avatar-box image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.comment-box .row2 {
		font-size: 12px;
		margin-bottom: 10px;
	}
	.comment-box .row3 {
		margin-bottom: 10px;
	}
	.comment-box .row3 image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 10px;
	}
	.xq-box image {
		width: 750rpx;
	}
	.backbtn {
		position: absolute;
		top: 40px;
		left: 40px;
		width: 40px;
		height: 40px;
		background-color: orange;
		background-image: url(../../static/back.svg);
		background-size: 100% 100%;
		z-index: 999999;
	}
</style>
